<template>
	<view class="demo">
		<nav-bar isBack title="仕一堂产品包"></nav-bar>
		<!-- banner -->
		<view class="d_banner" v-if="info.productPack">
			<swiper class="swiper" autoplay interval="4200" duration="300" @change="bannerChange">
				<!-- <view> -->
				<swiper-item v-for="item in thumb_url">
					<view class="d_bItem"><image :src="item.image_path"></image></view>
				</swiper-item>
				<!-- </view> -->
			</swiper>
			<view class="d_bDots">
				<view v-for="(item, index) in thumb_url" :key="index">
					<view class="d_bDot" :class="{ active: index == bannerIndex }"><view class="d_bIcon"></view></view>
				</view>
			</view>
		</view>
		<view class="d_content" v-if="info.productPack">
			<view class="topinfo">
				<view class="infoshare">
					<image src="@/static/mall/share.png"></image>
					<text>分享</text>
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="sharebtn"></button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<button @click="actionsheettip" class="sharebtn"></button>
					<!-- #endif -->
				</view>
				<view class="d_cTitle">{{ info.productPack.name }}</view>
				<view class="d_cInfo">
					<text class="pR-32">产品包案例</text>
					<text>{{ product_pack_scene.area }}m² | {{ product_pack_scene.house_name }} | {{ product_pack_scene.style_name }}</text>
				</view>
			</view>
			<view class="d_cTextarea">
				<!-- 标签：d_ctTit/d_ctTxt/d_ctImg -->
				<view class="d_ctTit">{{ product_pack_scene.title }}</view>
				<!-- <view class="d_ctImg" v-for="(items,indexs) in item.thumb_url">
					 <image :src="items.img_url"></image>
				 </view> -->
				<view class="d_ctTxt">
					<u-parse :html="details"></u-parse>
					<!-- <rich-text :nodes="details | formatRichText" selectable='true'></rich-text> -->
				</view>

				<!-- <view class="d_cAuth">
					<view class="d_caTxt">创建于 2020.11.01</view>
					<view class="d_caTxt">文章由作者自行上传，仅代表作者本人观点。</view>
				</view> -->
			</view>
		</view>

		<view class="infobottom" v-if="info.productPack">
			<view class="infoshop">
				<view class="shopimg"><image :src="info.productPack.lead_img"></image></view>
				<view class="infoshop-right">
					<view class="infotitle" @click="topage(product_pack_scene.pack_id)">
						{{ info.productPack.name }}
						<text>展开</text>
					</view>
					<view class="infotext">{{ product_pack_scene.area }}m²</view>
					<view class="infoprie">套餐价：￥{{ info.productPack.primary_price }}</view>
				</view>
				<view class="infobtn" @click="buy()">立即支付</view>
			</view>
			<view class="d_ctShop" @click="topage(product_pack_scene.pack_id)">
				<view class="d_ctShop-icon"><image src="/static/common/icon_more.png"></image></view>
				<view class="d_ctShop-txt">套餐商品:</view>
				<view class="d_ctShop-imgs">
					<view class="d_ctShop-img" v-for="(item, index) in info.product_pack_diy_list" v-if="index < 4"><image :src="item.main_imgurl"></image></view>
				</view>
			</view>
		</view>

		<view class="d_fixed" style="right: 32rpx;bottom: 500rpx;">
			<view class="d_fBtn" @click="GoEvaluate">
				<view class="d_fcIcon"><image src="https://cos.ryz1620.com/liankun/static/packpingjia.png"></image></view>
				<view class="d_fcTxt">用户评价</view>
			</view>
		</view>
		<!-- 浮窗按钮 -->
		<view class="d_fixed" v-if="info.productPack">
			<view class="d_fBtn" @click="topage(product_pack_scene.pack_id)">
				<view class="d_fcIcon"><image src="/static/common/icon_fixed2.png"></image></view>
				<view class="d_fcTxt">套餐商品</view>
			</view>
		</view>
	</view>
</template>

<script>
import navBar from '@/components/navBar/navBar';
import service_product from '@/service/product.js';

export default {
	data() {
		return {
			info: '',
			product_pack_scene: '',
			details: '',
			pack_id: '',
			sku_id: '',
			// 轮播图
			bannerIndex: 0,
			thumb_url: [],
			bannerCurrent: 0,
			background: ['color1', 'color2', 'color3'],
			indicatorDots: true,
			share_uid:'',//分享者id
		};
	},

	components: {
		navBar
	},

	onLoad(params) {
		this.$utils.getUrl()
		this.userId = uni.getStorageSync('userId');
		let token = uni.getStorageSync('token');
		let shareuId = params.share_id;
		let scene = decodeURIComponent(params.scene);
		scene = scene.split('&');
		let obj = {};
		for (let i = 0; i < scene.length; i++) {
			let newscene = scene[i].split('=');
			obj[newscene[0]] = newscene[1];
		}
		if(obj.s){
			this.share_uid=obj.s;
		}
		if(obj.share_id){
			this.share_uid=obj.share_id;
		}
		if(obj.pid){
			this.pack_id = obj.pid;
		}else{
			this.pack_id = params.pack_id;
		}
		if(params.share_id){
			this.share_uid=shareuId;
		}
		this.getDetail();
		this.$store.commit('index/SET_shareuId', shareuId);
		if (token && shareuId) {
			service_mall
				.getPromoter({
					share_uid: shareuId
				})
				.then(res => {});
		}
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
		}
		return {
			title: this.info.productPack.name,
			path: '/pages_product/pages/product/detail/detail?pack_id=' + this.pack_id + '&share_id=' + this.userId,
			success: function(res) {
				console.log('成功', res);
			}
		};
	},
	//分享朋友圈
	onShareTimeline(res) {
		if (res.from === 'menu') {}
		return {
			title: this.info.productPack.name,
			path: '/pages_product/pages/product/detail/detail?pack_id=' + this.pack_id + '&share_id=' + this.userId,
			imageUrl: info.productPack.lead_img,
			success: function(res) {
				
			}
		};
	},
	filters: {
		/**
		 * 处理富文本里的图片宽度自适应
		 * 1.去掉img标签里的style、width、height属性
		 * 2.img标签添加style属性：max-width:100%;height:auto
		 * 3.修改所有style里的width属性为max-width:100%
		 * 4.去掉<br/>标签
		 * @param html
		 * @returns {void|string|*}
		 */
		formatRichText(html) {
			//控制小程序中图片大小
			let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<img/gi, '<img style="width:100%;max-width:100%;height:auto;display:inline-block;margin:20rpx auto;border-radius:10rpx;"');
			return newContent;
		}
	},
	methods: {
		GoEvaluate(){
			uni.navigateTo({
				url:'/pages_product/pages/product/evaluate/list?pack_id='+this.pack_id
			})
		},
		// 获取详情数据
		getDetail() {
			service_product
				.getPackDetail({
					pack_id: this.pack_id
				})
				.then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.info = data;
						this.product_pack_scene = data.product_pack_scene;
						this.details = data.product_pack_scene.content;
						this.sku_id = data.productPack.sku_lst[0].id;
						this.thumb_url = data.product_pack_scene.thumb_url;
					}
				});
		},
		// 购买产品包
		buy() {
			let params = {
				origin_type: 2,
				cart_ids: '',
				goods: {
					sku_id: this.sku_id,
					pack_id: this.pack_id,
					num: 1
				},
				share_id:this.share_uid
			};
			uni.setStorage({
				key: 'order_list',
				data: params,
				success: () => {
					uni.navigateTo({
						url: '/pages_product/pages/product/order/order?sourceFrom=detail&Nocart=1'
					});
				}
			});
		},
		// 轮播图
		bannerChange(e) {
			this.bannerIndex = e.detail.current;
		},
		topage(id) {
			uni.navigateTo({
				url: '/pages_product/pages/product/classify/classify?pack_id=' + id
			});
		},
		// app分享
		actionsheettip() {
			let title = this.info.productPack.name;
			let imageUrl =this.thumb_url[0].image_path;
			let path = '/pages_product/pages/product/detail/detail?pack_id=' + this.pack_id + '&share_id=' + this.userId;
			let that = this;
			uni.downloadFile({
				url: imageUrl,
				success: (res) => {
					if (res.statusCode === 200) {
					    uni.compressImage({
							src: res.tempFilePath,
							quality: 30,
							success: ress => {
								var tempFilePath=ress.tempFilePath;
								that.$common.appShare(title, tempFilePath, path, result => {
									 if (result == 'success') {
									// 	分享成功
									 }
								})
							}
						})
					}
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.demo {
	// navBar=====
	.d_navBar {
		height: 0;
		position: relative;
		z-index: 500;
	}

	// banner=====
	.d_banner {
		height: 500rpx;
		background: #f0f0f0;
		position: relative;
		z-index: 1;

		.d_bItem {
			width: 100%;
			height: 100%;
			position: relative;
		}

		.d_bTag {
			height: 58rpx;
			line-height: 58rpx;
			color: #fff;
			font-size: 24rpx;
			padding: 0 24rpx;
			border-radius: 28rpx;
			background: rgba(51, 51, 51, 0.8);
			position: absolute;
			bottom: 78rpx;
			right: 36rpx;
		}

		.d_bDots {
			width: 100%;
			position: absolute;
			bottom: 66rpx;
			left: 0;
			display: flex;
			justify-content: center;
		}

		.d_bDot {
			width: 24rpx;
			height: 36rpx;

			&.active .d_bIcon {
				background: #ffd425;
			}

			.d_bIcon {
				width: 12rpx;
				height: 12rpx;
				margin: 12rpx auto 0;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.5);
			}
		}
	}

	// 内容=====
	.d_content {
		padding: 40rpx 0;
		margin-top: -58rpx;
		border-radius: 20rpx 20rpx 0 0;
		background: #fff;
		position: relative;
		z-index: 2;
		padding-bottom: 420rpx;
		box-shadow: 4rpx 4rpx 10rpx 4rpx #eee;

		.d_cTitle {
			min-height: 56rpx;
			line-height: 56rpx;
			font-size: 40rpx;
			font-weight: bold;
			padding: 0 32rpx;
		}

		.d_cInfo {
			min-height: 34rpx;
			line-height: 34rpx;
			color: #939393;
			font-size: 24rpx;
			padding: 0 36rpx;
			margin-top: 20rpx;
		}

		// 用户信息
		.d_cUser {
			height: 128rpx;
			margin: 60rpx 32rpx 0;
			border-radius: 64rpx;
			background: #f9f6f3;
		}

		.d_cuHeadimg {
			width: 88rpx;
			height: 88rpx;
			margin: 20rpx 16rpx 0 20rpx;
			border-radius: 50%;
			background: #f0f0f0;
			float: left;
			overflow: hidden;
		}

		.d_cuFocus {
			height: 128rpx;
			padding: 0 40rpx 0 28rpx;
			float: right;
		}

		.d_cuBtn {
			width: 136rpx;
			height: 48rpx;
			line-height: 48rpx;
			color: #fff;
			font-size: 20rpx;
			padding-left: 56rpx;
			margin-top: 40rpx;
			border-radius: 28rpx;
			background: #333;
			position: relative;
			box-sizing: border-box;

			&::before,
			&::after {
				content: '';
				width: 2rpx;
				height: 12rpx;
				border-radius: 4rpx;
				background: #fff;
				position: absolute;
				top: 50%;
				left: 36rpx;
				transform: translateY(-50%);
			}

			&::after {
				transform: translateY(-50%) rotate(90deg);
				transform-origin: 50% 50%;
			}
		}

		.d_cuCont {
			padding-top: 26rpx;
			overflow: hidden;
		}

		.d_cuName {
			height: 44rpx;
			line-height: 44rpx;
			font-size: 32rpx;
		}

		.d_cuFans {
			height: 34rpx;
			line-height: 34rpx;
			color: #939393;
			font-size: 24rpx;
		}

		// 富文本内容
		.d_ctTit {
			line-height: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			padding: 0 32rpx;
			margin-top: 60rpx;
		}

		.d_ctTxt {
			line-height: 44rpx;
			padding: 0 36rpx;
			margin-top: 28rpx;
		}

		.d_ctImg {
			height: 376rpx;
			margin: 28rpx 32rpx 0;
			border-radius: 8rpx;
			background: #f0f0f0;
			overflow: hidden;
		}

		.d_cAuth {
			padding: 0 36rpx;
			margin-top: 80rpx;
		}

		.d_caTxt {
			line-height: 44rpx;
			color: #939393;
			font-size: 24rpx;
		}
	}

	// 评论=====
	.d_evaluate {
		padding: 40rpx 0;
		background: #fff;

		.d_eTitle {
			height: 50rpx;
			line-height: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			padding-left: 36rpx;

			& > text {
				font-size: 24rpx;
				font-weight: bold;
				padding-left: 8rpx;
			}
		}

		.d_eList {
			padding-left: 32rpx;
		}

		.d_eItem {
			margin-top: 30rpx;

			&:nth-last-child(1) .p_eCont::after {
				content: none;
			}
		}

		.d_eHead,
		.d_eIts .d_eiHead {
			width: 66rpx;
			height: 66rpx;
			margin-right: 16rpx;
			border-radius: 50%;
			background: #f0f0f0;
			float: left;
		}

		.d_eCont {
			padding-bottom: 28rpx;
			position: relative;
			overflow: hidden;

			&::after {
				content: '';
				width: 100%;
				height: 1px;
				background: #f4f4f4;
				position: absolute;
				bottom: 0;
				left: 0;
				transform: scaleY(0.5);
			}
		}

		.d_eName,
		.d_eIts .d_eiName {
			height: 28rpx;
			line-height: 28rpx;
			color: #939393;
			font-size: 20rpx;
		}

		.d_eAuth,
		.d_eIts .d_eiAuth {
			width: 64rpx;
			height: 28rpx;
			line-height: 28rpx;
			text-align: center;
			color: #333;
			font-size: 20rpx;
			margin-left: 8rpx;
			border-radius: 28rpx;
			background: #f6f7fb;
			display: inline-block;
		}

		.d_eTxt,
		.d_eIts .d_eiTxt {
			min-height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			padding-right: 32rpx;
			margin-top: 4rpx;
		}

		.d_eTip,
		.d_eIts .d_eiTip {
			color: #939393;
			font-size: 20rpx;
			padding-left: 16rpx;
			display: inline-block;
		}

		// 他人回复
		.d_eiItem {
			margin-top: 16rpx;
		}

		.d_eiCont {
			overflow: hidden;
		}

		.d_eiReply {
			color: #939393;
			font-size: 20rpx;
			padding: 0 4rpx;
		}
	}

	// 评论框=====
	.d_talk {
		.d_tShim {
			height: 96rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.d_tBox {
			width: 100vw;
			height: 96rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 101;
			box-shadow: 0 0 12rpx 0 rgba(155, 155, 155, 0.16);
		}

		.d_tFuns {
			padding-left: 30rpx;
			float: right;
		}

		.d_tFun {
			width: 110rpx;
			height: 96rpx;
			float: right;
		}

		.d_tIcon {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			color: #6c6c6c;
			font-size: 40rpx;
			margin: 0 auto;
			padding-top: 14rpx;
			box-sizing: content-box;
		}

		.d_tTxt {
			height: 28rpx;
			line-height: 28rpx;
			text-align: center;
			color: #939393;
			font-size: 20rpx;
		}

		.d_tInput {
			height: 60rpx;
			margin: 20rpx 0 0 32rpx;
			border-radius: 60rpx;
			overflow: hidden;

			& > input {
				width: 100%;
				height: 100%;
				font-size: 24rpx;
				padding: 0 28rpx;
				background: #f6f7fb;
			}
		}
	}

	// 浮窗按钮=====
	.d_fixed {
		position: fixed;
		right: 32rpx;
		bottom: 370rpx;
		z-index: 53;

		.d_fBtn {
			width: 118rpx;
			height: 118rpx;
			margin-top: 22rpx;
			border-radius: 50%;
			background: #fff;
			box-shadow: 0 0 20rpx #dedede;
			overflow: hidden;

			&:active {
				opacity: 0.92;
			}
		}

		.d_fcIcon {
			width: 40rpx;
			height: 40rpx;
			margin: 25rpx auto 0;
		}

		.d_fcTxt {
			height: 34rpx;
			line-height: 34rpx;
			text-align: center;
			font-size: 22rpx;
		}
	}

	// 目录
	.d_catalog {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		visibility: hidden;
		transition: visibility 0.3s;

		&.active {
			visibility: visible;

			.d_cBg {
				opacity: 1;
			}

			.d_cContain {
				transform: translateY(0);
			}
		}

		.d_cBg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);
			opacity: 0;
			transition: opacity 0.3s;
		}

		.d_cContain {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			flex-flow: column;
			transition: transform 0.3s;
			transform: translateY(100%);
		}

		.d_cShade {
			height: 256rpx;
		}

		.d_cBox {
			border-radius: 24rpx 24rpx 0 0;
			background: #fff;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-flow: column;
			flex: 1;
		}

		.d_cClose {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			color: #333;
			font-size: 40rpx;
			padding: 16rpx;
			position: absolute;
			top: 30rpx;
			right: 16rpx;
			box-sizing: content-box;
		}

		.d_cTitle {
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-weight: bold;
			padding: 40rpx 0 30rpx;
			box-sizing: content-box;
		}

		.d_cList {
			overflow-y: auto;
			flex: 1;
		}

		.d_cItem {
			padding: 30rpx 0;
			position: relative;
		}

		.d_cArrow {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			color: #939393;
			font-size: 32rpx;
			position: absolute;
			top: 34rpx;
			right: 32rpx;
		}

		.d_cName {
			height: 40rpx;
			line-height: 40rpx;
			font-weight: bold;
			padding-left: 36rpx;
		}

		.d_cImgs {
			padding: 14rpx 0 0 32rpx;
			overflow: hidden;
		}

		.d_cImg {
			width: 220rpx;
			height: 220rpx;
			margin: 14rpx 14rpx 0 0;
			border-radius: 4rpx;
			background: #f0f0f0;
			float: left;
		}
	}
}

.infobottom {
	background: #fff;
	border-radius: 15rpx 15rpx 0 0;
	padding: 20rpx 0;
	position: fixed;
	bottom: 0;
	width: 100%;
	left: 0;
	z-index: 99;
	box-shadow: 4rpx 4rpx 10rpx 4rpx #eee;

	.d_ctShop {
		height: 106rpx;
		line-height: 106rpx;
		font-weight: bold;
		padding: 0 64rpx 0 40rpx;
		margin: 28rpx 32rpx 0;
		border-radius: 10rpx;
		background: #f6f7fb;
		position: relative;
	}

	.d_ctShop-icon {
		width: 66rpx;
		height: 66rpx;
		margin-top: -33rpx;
		position: absolute;
		top: 50%;
		right: 30rpx;
		background: #fff;
		border-radius: 10rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-top: 13rpx;
			margin-left: 13rpx;
		}
	}

	.d_ctShop-txt {
		float: left;
	}

	.d_ctShop-imgs {
		overflow: hidden;
	}

	.d_ctShop-img {
		width: 66rpx;
		height: 66rpx;
		margin: 20rpx 0 0 28rpx;
		border-radius: 4rpx;
		background: #fff;
		overflow: hidden;
		float: left;
	}
}

.topinfo {
	position: relative;
	padding-right: 120rpx;

	.infoshare {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		width: 120rpx;
		height: 84rpx;
		text-align: center;
		padding-top: 5rpx;

		image {
			width: 36rpx;
			height: 36rpx;
			display: block;
			margin: auto;
			margin-bottom: 5rpx;
		}
	}
}

.infoshop {
	padding-left: 220rpx;
	position: relative;
	padding-right: 20rpx;
	padding-top: 20rpx;

	.shopimg {
		width: 180rpx;
		height: 140rpx;
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		background: #d8d8d8;
		border-radius: 15rpx;
	}

	.infotitle {
		font-size: 30rpx;
		font-weight: bold;
		padding-right: 90rpx;
		position: relative;
		line-height: 50rpx;

		text {
			position: absolute;
			right: 0;
			top: 0;
			font-weight: normal;
		}
	}

	.infotext {
		font-size: 28rpx;
		color: #999;
		line-height: 50rpx;
	}

	.infoprie {
		font-size: 30rpx;
		color: #e9423e;
	}

	.infobtn {
		position: absolute;
		right: 20rpx;
		bottom: 0;
		border: 1px #e9423e solid;
		color: #e9423e;
		padding: 6rpx 20rpx;
		border-radius: 8rpx;
	}
}

.sharebtn {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
}

.i_tBtn {
	width: 102rpx;
	height: 102rpx;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid #fff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999;
}

.i_tbImg {
	width: 42rpx;
	height: 42rpx;
	margin: 20rpx auto 0;
}

.i_tbTxt {
	width: 100%;
	height: 34rpx;
	line-height: 34rpx;
	text-align: center;
	color: #fff;
	font-size: 24rpx;
	position: absolute;
	top: 58rpx;
	left: 0;
}
</style>
